<template>
  <div class="code-invite-container" v-title data-title="二维码邀请">
    <div class="flex-container">
      <div class="history-header">
        <span class="left-deco"></span>
        <span class="date-unit">我的推荐码</span>
        <span class="right-deco"></span>
      </div>
      <div class="invite-code">{{code}}</div>
      <button class="copy-btn"
              v-clipboard:copy="code"
              v-clipboard:success="onCopy"
              v-clipboard:error="onError">复制</button>

    </div>
    <img :src="codeUrl" class="code-img">
    <div class="save-tip">长按图片即可保存个人专属二维码</div>
  </div>
</template>
<script>
  export default{
    name: 'gift',
    data(){
        return{
            code:'',
          timer:null
        }
    },
    computed:{
      codeUrl(){
        let Base64 = require('js-base64').Base64;
        const url = Base64.encode(this.$route.query.QrInfo);
        return 'http://clientapp-service.aishangjinfu.cn/as/app/financial/normal/qrcode?url='+url;
      }
    },
    methods:{
      onCopy(e){
        if(this.timer){
            return
        }
        this.$toast('复制成功')
        this.timer = setTimeout(()=>{
            this.timer=null;
        },5000)
      },
      onError(e){
        if(this.timer){
          return
        }
        this.$toast('复制失败')
        this.timer = setTimeout(()=>{
          this.timer=null;
        },5000)
      }
    },
    created(){
        this.code = this.$route.query.extensionCode
    }
  }
</script>
<style lang="stylus" scoped>
  @import "~style/varibles.styl"
  .code-invite-container
    position absolute
    top 0
    left 0
    right 0
    bottom 0
    background url("/static/img/bg_erweima@2x.png") no-repeat
    background-size 100% 100%
    .flex-container
      display flex
      flex-direction column
      position absolute
      width 100%
      top 13%
      align-items center
      .history-header
        text-align center
        .left-deco
          background url("/static/img/left.png") no-repeat
          background-size 100%
          height .16rem
          width 1.14rem
          display inline-block
        .right-deco
          background url("/static/img/right.png") no-repeat
          background-size 100%
          height .16rem
          display inline-block
          width 1.14rem
        .date-unit
          margin 0 .2rem
          font-size .32rem
      .invite-code
        color $darkTextColor
        font-size .54rem
        margin-top .6rem
      .copy-btn
        width 1.4rem
        height .5rem
        line-height  .5rem
        text-align center
        border-radius .26rem
        color #B33C25
        font-size .24rem
        margin-top .25rem
        background linear-gradient(to right,#FFE4B0,#FFBF61 )
    .code-img
      width 3.26rem
      height 3.26rem
      position absolute
      top 40%
      left 50%
      transform translateX(-50%)
    .save-tip
      position absolute
      bottom 15%
      text-align center
      width 100%
      color #C5703E
      font-weight bold
      font-size .3rem
</style>
